<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p3_CSS常用值</title>
    <style>
        h1{
            color: red;
            /*rgb表示法(red,green,blue),每个位置取值范围[0,255]*/
            color: rgb(255,0,0);
            color: rgb(0,255,0);
            color: rgb(0,0,255);
            color: rgb(128,128,128);
            color: rgb(0,0,0);
            color: rgb(255,255,255);
            /*十六进制表示法 #rrggbb,每个位置取值范围[00,ff]*/
            color: #f00;
            color: #0f0;
            color: #00f;
            color: #000;
            color: #fff;
            color: #808080;
            /*rgba表示法(red,green,blue,alpha),alpha不透明度,取值范围[0,1]*/
            color: rgba(255,0,0,1);
            color: rgba(255,0,0,0.8);
            color: rgba(255,0,0,0.6);
            color: rgba(255,0,0,0.3);
            color: rgba(255,0,0,.1);
            color: rgba(255,0,0,0);
        }
        .d1{
            /*注意:插入背景图必须设置所在区域的大小*/
            width: 100px;
            height: 100px;
            /*插入背景图*/
            background-image: url("img/cxk.jpg");
            /*调整背景图的尺寸:宽度 高度*/
            background-size: 100px 100px;
            /*可以同时设置背景色 没有图的地方显示背景色*/
            background-color: #000;
        }
        .d2{
            width: 500px;
            height: 300px;
            border: 5px solid red;
            background-image: url("img/cxk.jpg");
            /*设置图片出允许重复*/
            background-repeat: no-repeat;
            /*水平方向的正方向是右 垂直方向的正方向是下*/
            background-position: 0 0; /*默认位置在左上角 原点*/
            background-position: -50px 0; /*向左*/
            background-position: 0 50px; /*向下*/
            background-position: -50px -50px; /*向左上*/
            background-position: 50% 50%;
            background-position: 100% 100%;
            background-position: left top;
            background-position: right top;
            background-position: center center;
            background-position: center;
        }
        .d3{
            width: 500px;
            height: 300px;
            background-image: linear-gradient(30deg,red,orange,yellow);
        }
    </style>
</head>
<body>
<h1>测试颜色</h1>
<!--.d*3 Tab补齐-->
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>